<template>
  <div class="line-up-free">
    <c-title text="排队补贴"></c-title>
    <div class="head">
      <div class="head-box">
        <div class="center">
          <span class="price">{{ statistic.wait_free }}</span>
          <span class="desc">待补贴金额</span>
        </div>
        <div class="center">
          <span class="price">{{ statistic.rank }}</span>
          <span class="desc">补贴排位顺序号</span>
        </div>
        <div class="center">
          <span class="price">{{ statistic.wait_queue }}</span>
          <span class="desc">未排队金额</span>
        </div>
      </div>
      <div class="head-total">
        <div class="center">
          <span class="head-total-price">{{ statistic.amounts }}</span>
          <span class="head-total-desc">累计订单金额</span>
        </div>
        <div class="center">
          <span class="head-total-price">{{ statistic.already_free }}</span>
          <span class="head-total-desc">已补贴金额</span>
        </div>
      </div>
      <div class="tips" @click="show=true">活动规则</div>
    </div>
    <template v-for="item in list" >
      <div class="content-box" :key="item.id">
        <div class="number"  v-if="item.status!==1">排位顺序号：{{ item.rank }}</div>
        <div class="time">{{ item.created_at }}</div>
        <div class="around">
          <div class="center">
            <span class="content-box-price">{{ item.amounts }}</span>
            <span class="content-box-desc">门槛金额</span>
          </div>
          <div class="center">
            <span class="content-box-price">{{ item.wait_amounts }}</span>
            <span class="content-box-desc">待补贴金额</span>
          </div>
          <div class="center">
            <span class="content-box-price">{{ item.free_amounts }}</span>
            <span class="content-box-desc" @click="handle(item)">已补贴金额 <van-icon name="arrow" /></span>
          </div>
        </div>
        <div class="img" v-if="item.status==1">
          <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/images/free-order.png" alt="">
        </div>
      </div>
    </template>
    <van-overlay :show="show">
      <div class="wrapper">
        <div class="block">
          <div class="block-title">活动规则</div>
          <div class="close">
            <van-icon name="cross" @click="show = false" />
          </div>
          <div class="block-desc">
            <div v-html="explain"></div>
          </div>
        </div>
      </div>
    </van-overlay>
    <van-popup v-model="show_record" closeable position="bottom" :style="{ height: '40%' }" round>
      <div class="popup-title">补贴记录</div>
      <van-cell-group :border="false">
        <van-cell v-for="(item,i) in has_many_free" :key="i">
          <template #title>
            <div style="font-size: 0.875rem;color: #00001C;font-weight: 400;">{{ item.created_at }}</div>
          </template>
          <template #default>
            <div class="record-price" :class="{'c-F15353':item.amounts}">{{item.amounts>0?('+'+item.amounts):item.amounts}}</div>
          </template>
        </van-cell>
      </van-cell-group>
    </van-popup>
  </div>
</template>

<script>
import {scrollMixin} from "../../../utils/mixin"
export default {
  mixins:[scrollMixin],
  data() {
    return {
      show: false,
      show_record: false,
      isLoadMore: true,
      page: 1,
      total_page: 0,
      explain:"",
      statistic:{},
      list:[],
      has_many_free:[],
    };
  },
  activated() {
    this.isLoadMore = true;
    this.getData();
  },
  methods: {
    handle(item){
      this.has_many_free = item.has_many_free;
      this.show_record = true;
    },
    getData(page=1) {
      $http.post("plugin.queue-order-free.frontend.controllers.center.index",{page},'').then(res=>{
        this.isLoadMore=true;
        if(res.result!==1){
          return this.$toast(res.msg);
        }
        console.log(res.data,"data===");
        this.explain = res.data.explain;
        this.statistic=res.data.statistic;
        if(res.data.list.current_page==1){
          this.list = res.data.list.data;
        }else{
          this.list =  this.list.concat(res.data.list.data);
        }
        this.page = res.data.list.current_page;
        this.total_page = res.data.list.last_page;
      })
    },
    getMoreData(){
      this.isLoadMore = false;
      if(this.page>=this.total_page){
        return;
      }
      let page = this.page + 1;
      this.getData(page);
    },
  }
};
</script>

<style scoped lang="scss">
.record-price{
  font-size: 0.875rem;font-weight: 400;color: #00001C;
}
.c-F15353{
  color: #F15353 !important;
}
::v-deep .van-nav-bar .van-icon {
  color: #fff;
  font-size: 1.0938rem;
}
::v-deep .van-overlay{
  z-index: 101 !important;
}

::v-deep .van-button--default {
  background-color: #F15353;
}

::v-deep .van-nav-bar__title {
  color: #FFFFFF;
  font-size: 1.0625rem;
  font-weight: 500;
}

::v-deep .van-nav-bar {
  border-bottom: 1px solid #F15353;
  background-color: #F15353;
  z-index: 2 !important;
}

.line-up-free {
  padding-bottom: 1.0938rem;
  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .block-title {
    text-align: center;
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 0.9063rem;
  }

  .popup-title {
    font-size: 0.9375rem;
    font-weight: 400;
    color: #2C2C2C;
    margin-top: 1.25rem;
    margin-bottom: 0.3125rem;
  }

  .block-desc {
    height: 18rem;
    font-size: 0.8125rem;
    font-weight: 400;
    color: #2C2C2C;
    text-wrap: wrap;
    text-align: left;
    overflow-y: scroll;
  }
  // .block-desc::-webkit-scrollbar{
  //   background: #ccc;
  //   border-radius: 0.3rem;
  //   box-shadow: 0 0 0.1rem #999;
  //   width: .1rem;
  // }

  .block {
    position: relative;
    width: 17.5rem;
    height: 22.4375rem;
    background-color: #fff;
    border-radius: 0.625rem;
    padding: 1.125rem 0.9688rem;
  }

  .close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
  }

  .around {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-top: 0.7813rem ;
  }
  .around .center:nth-child(2n){
    margin:0 0.9375rem ;
  }
  .content-box-price {
    font-size: 0.875rem;
    font-weight: bold;
    color: #00001C;
    margin-bottom: 0.3125rem;
  }

  .content-box-desc {
    font-size: 0.75rem;
    color: #6E6E79;
  }

  .time {
    font-size: 0.75rem;
    color: #6E6E79;
    font-weight: 400;
    text-align: left;
    margin-top: 0.1563rem;
    height: 0.75rem;
    line-height: 0.75rem;
  }

  .number {
    font-size: 0.875rem;
    color: #00001C;
    font-size: 400;
    text-align: left;
  }

  .content-box {
    padding: 0.9375rem 0.75rem;
    position: relative;
    .img{
      position: absolute;
      right: 0.3438rem;
      top: 0;
    }
    img{
      width: 3.875rem;
      height: auto;
    }
  }

  .head {
    position: relative;
    // height: 8.5rem;
    background: linear-gradient(180deg, #F15353 60%, #F5F5F5 100%);
  }

  .head-box {
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding-top: 1.25rem;
  }

  .center {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-wrap: nowrap;
  }

  .price {
    font-size: 0.9375rem;
    color: #fff;
    margin-bottom: 0.4375rem;
  }

  .desc {
    font-size: 0.75rem;
    color: #fff;
  }

  .content-box {
    margin: 0.625rem 0.75rem;
    background-color: #fff;
    border-radius: 0.5rem;
    min-height: 5.625rem;
  }

  .head-total {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: #fff;
    border-radius: 0.5rem;
    margin: 1.2813rem 0.75rem 0;
    padding-top: 1.1875rem;
    padding-bottom: 1.0938rem;

  }

  .tips {
    position: absolute;
    right: 0;
    bottom: 30%;
    width: 3.5rem;
    height: 1.25rem;
    line-height: 1.25rem;
    color: #fff;
    border-radius: 0.9375rem 0px 0px 0.9375rem;
    background: rgba(0, 0, 0, 0.39);
    font-size: 0.625rem;
  }

  .head-total-price {
    font-size: 0.9375rem;
    color: #00001C;
    font-weight: bold;
    margin-bottom: 0.4375rem;
  }

  .head-total-desc {
    font-size: 0.75rem;
    color: #6E6E79;
  }
}
</style>
